<template>
    <div>
        <tabbar :msg="'/xianxiang'"></tabbar>
        <!-- 轮播图 -->
        <div style="padding-top: 50px;">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <div class="swipe-item bg1">
                        <div class="bg3-text">
                            因为信用，所以简单
                            <!-- <br> -->
                            <div>提升商户商业效率，增强用户消费安全感</div>
                        </div>

                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 市场痛点 -->
        <div class="core_sc">
            <div class="title">市场痛点</div>
            <div class="core_sc_li">
                <div class="core_sc_item">
                    <img src="../../images/product/i16.png" alt="">
                    <div>商品价格高，消费者资金不足</div>
                </div>
                <div class="core_sc_item">
                    <img src="../../images/product/i17.png" alt="">
                    <div>消费者没有安全感</div>
                </div>
                <div class="core_sc_item">
                    <img src="../../images/product/i18.png" alt="">
                    <div>商家运营转化困难</div>
                </div>
            </div>
        </div>
        <!-- 我们的服务 -->
        <div class="fuwu">
            <div class="title" style="color: #fff;">我们的服务</div>
            <div class="fuwu_box">
                联手优质合作伙伴拓展商户，帮助商家降低新客决策门槛，提高转化率，锁定消费周期拉新快人一步;让更多商家与消费者享受数字信用时代的美好。我们的目标是让先享后付推动社会信用体系的建设，助力商家“无单变有单，小单变大单”，真正做到普惠大众的同时亦保护商家和消费者的权益。
            </div>
        </div>
        <!-- 行业解决方案 -->
        <div class="solution">
            <div class="title">我们的优势</div>
            <div class="core_box" style="padding-bottom: 0;">
                <!-- <div class="title" style="padding-top: 0;">付款</div> -->
                <div class="core_li">
                    <van-row gutter="13">
                        <van-col span="12">
                            <div class="core_item core_bg">
                                <img style="width: 96px;height: auto;" src="../../images/product/icon15.png" alt="">
                                <div class="core_title">付款</div>
                                <div class="core_li_con">无手续费 免息分期 <br>
                                    消费个性化分期<br>
                                    减轻消费者负担<br>
                                    预防不良商家跑路</div>
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="core_item core_bg">
                                <img style="width: 96px;height: auto;" src="../../images/product/icon16.png" alt="">
                                <div class="core_title">虚拟户</div>
                                <div class="core_li_con">
                                    提高成交量<br>
                                    提升客单价<br>
                                    快速增加营业额<br>
                                    稳定员工，多链路增收
                                </div>
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </div>
            <!-- <div class="desc">稳定高效 7行代码，极速入网</div> -->
            <van-swipe class="my-swipes" :autoplay="3000" indicator-color="#006FBC">
                <van-swipe-item>
                    <div class="solution_li">
                        <div class="solution_item">
                            <img src="../../images/product/11.png" alt="">
                            <div class="solution_content">
                                <div>先享后付</div>
                                <div> 0元先享，先用后付</div>
                            </div>
                        </div>
                        <div class="solution_item">
                            <img src="../../images/product/12.png" alt="">
                            <div class="solution_content">
                                <div>聚合支付</div>
                                <div>全场景覆盖满足
                                    商家基本收款需求
                                </div>
                            </div>
                        </div>
                        <div class="solution_item">
                            <img src="../../images/product/13.png" alt="">
                            <div class="solution_content">
                                <div>免息分期</div>
                                <div>消费压力小，商家好成单
                                </div>
                            </div>
                        </div>
                        <div class="solution_item">
                            <img src="../../images/product/14.png" alt="">
                            <div class="solution_content">
                                <div>消费安全
                                </div>
                                <div>消费者保护权益，
                                    让消费无忧
                                </div>
                            </div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>

        </div>
        <!--  -->

        <!--  -->
        <div>
            <div class="title">使用场景</div>
            <div class="pay_scene_box">
                <div class="pay_scene">
                    <div class="bg1">房屋租赁</div>
                    <div class="bg2">生活缴费</div>
                    <div class="bg3">健身</div>
                    <div class="bg4">美容美发</div>
                    <div class="bg5">免押租物</div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <footers></footers>
    </div>
</template>
<script>
import tabbar from "@/components/tabbar";
import footers from "@/components/footer";
export default {
    name: 'home',
    components: {
        tabbar, footers
    }
}
</script>
<style scoped lang="scss">
.swipe-item {
    height: 152px;
    background: url('../../images/home/bg1.png') no-repeat center;
    background-size: cover;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    // line-height: 152px;
    position: relative;
}

.desc {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 10px;
    color: #666666;
    text-align: center;
    margin-bottom: 18px;
}

.bg1 {
    background: url('../../images/product/bg6.png') no-repeat center;
    background-size: cover;
}

// .bg2 {
//     background: url('../../images/product/bg2.png') no-repeat center;
//     background-size: cover;
// }

// .bg3 {
//     background: url('../../images/product/bg3.png') no-repeat center;
//     background-size: cover;
// }

.bg1-text {
    width: 100%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bg2-text {
    text-align: left;
    width: 100%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.bg3-text {
    text-align: left;
    width: 100%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);

    div {
        font-weight: 400;
        font-size: 12px;
        margin-top: 8px;
    }
}

.my-swipe {
    ::v-deep .van-swipe__indicator {
        width: 12px;
        height: 2px;
        border-radius: 0;
    }
}

// 市场痛点
.core_sc {
    margin-bottom: 20px;

    .core_sc_li {
        padding: 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // justify-content: center;
        .core_sc_item {
            width: 30%;
            height: 130px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 13px;
            color: #333333;
            text-align: center;
            background: #FFFFFF;
            box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
            border-radius: 4px;
            // padding-top: 14px;
            padding: 14px 7px 0 7px;
            box-sizing: border-box;

            img {
                display: block;
                margin: 0 auto;
                width: 46px;
                margin-bottom: 12px;
            }
        }
    }

}

// 我们的服务
.fuwu {
    background: url('../../images/product/bg7.png') no-repeat center;
    background-size: cover;
    padding: 0 16px;
    padding-bottom: 20px;

    .fuwu_box {
        background: url('../../images/product/bg8.png') no-repeat center;
        background-size: cover;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        padding: 16px 12px;
        border-radius: 5px;
    }
}

.core_box {
    ::v-deep .van-swipe-item {
        padding-bottom: 20px;
    }

    ::v-deep .van-swipe__indicator {
        background: #D2D2D2;
    }
}

.core_box {
    // background: #F6FBFE;
    padding-bottom: 10px;

    .core_li {
        padding: 0 12px;

        .core_item {
            width: 100%;
            height: 134px;
            background: #FFFFFF;
            box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
            border-radius: 4px;
            margin-bottom: 12px;
            display: flex;
            // justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: 18px 0;
            box-sizing: border-box;

            img {
                width: 50px;
                height: 50px;
            }

            .core_title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #333;
                margin-top: 10px;
                text-align: center;
            }

            .core_desc {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #666;
                margin-top: 10px;
                text-align: center;
                padding: 0 10px;
            }
        }

        .core_bg {
            height: 198px;
            padding-top: 8px;

            .core_title {
                font-weight: 500;
                font-size: 14px;
                color: #0051C4;
                margin-bottom: 8px;
                margin-top: 8px;
            }

            .core_li_con {
                font-weight: 400;
                font-size: 12px;
                color: #666666;
                text-align: center;
            }
        }
    }
}

.title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    // margin: 24px 0 20px 0;
    padding: 24px 0 20px 0;
    text-align: center;
}

// 平台安全
.solution {
    background: url('../../images/product/bg5.png') no-repeat center;
    background-size: cover;
    // padding-bottom: 14px;

    ::v-deep .van-swipe-item {
        padding-bottom: 20px;
    }

    ::v-deep .van-swipe__indicator {
        background: #D2D2D2;
    }

    .solution_li {
        padding: 0 12px;

        .solution_item {
            background: #FFFFFF;
            box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
            border-radius: 4px;
            padding: 16px 16px 16px 12px;
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-bottom: 10px;

            img {
                width: 40px;
                height: 40px;
            }

            .solution_content {
                width: calc(100% - 36px);
                margin-left: 9px;

                div:nth-child(1) {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 14px;
                    color: #006FBC;
                }

                div:nth-child(2) {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #666666;
                    margin-top: 6px;
                }
            }
        }
    }
}

// 灵活分期
.flex_pay {
    padding: 0 12px;

    img {
        width: 100%;
        margin-bottom: 30px;
    }
}

// 支付产品
.fz {
    display: flex;
    justify-content: space-between;
    height: 72px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
    border-radius: 4px;
    margin-bottom: 12px;
    padding: 18px;
    box-sizing: border-box;

    img {
        width: 36px;
        height: 36px;
    }

    .pay_core {
        width: calc(100% - 36px);
        margin-left: 14px;

        .core_title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #006FBC;
            margin-bottom: 4px;
        }

        .core_desc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
        }
    }


}

.pay_scene_box {
    width: 100%;
    /* 设置宽度 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    padding-left: 12px;
    box-sizing: border-box;
    margin-bottom: 20px;

    .pay_scene {
        display: flex;
        justify-content: flex-start;
        /* 使内容从左到右排列 */
        align-items: center;
        flex-wrap: nowrap;
        /* 不换行 */
        overflow-x: auto;
        /* 仅在水平方向允许滚动 */
        scroll-snap-type: x mandatory;
        /* 可选：实现平滑滚动效果 */
        scrollbar-width: none;
        /* Firefox 隐藏滚动条 */
        -ms-overflow-style: none;
        /* IE 和 Edge 隐藏滚动条 */
        padding: 0 12px;
        /* 添加内边距以避免内容紧贴边缘 */

        /* 隐藏滚动条 */
        &::-webkit-scrollbar {
            display: none;
            /* WebKit 浏览器隐藏滚动条 */
        }

        div {
            flex: 0 0 146px;
            /* 确保每个子项的宽度固定 */
            height: 224px;
            background: red;
            display: flex;
            align-items: center;
            justify-content: center;
            scroll-snap-align: start;
            /* 可选：使每个项在滚动时对齐 */
            margin-right: 10px;
            /* 添加间距 */
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }

        .bg1 {
            background: url('../../images/product/i11.png') no-repeat center;
            background-size: cover;
        }

        .bg2 {
            background: url('../../images/product/i12.png') no-repeat center;
            background-size: cover;
        }

        .bg3 {
            background: url('../../images/product/i13.png') no-repeat center;
            background-size: cover;
        }

        .bg4 {
            background: url('../../images/product/i14.png') no-repeat center;
            background-size: cover;
        }

        .bg5 {
            background: url('../../images/product/i15.png') no-repeat center;
            background-size: cover;
        }
    }
}
</style>